<template>
  <div class="border-line card">
    <header-title title="" @fullScreen="handleFullScreen"></header-title>
    <div class="subtext">户型面积占比图</div>
    <div class="subtext" style="margin-left: 1%; width: 49%">
      {{ `运营单位入驻情况（运营单位入驻数量：${total}个）` }}
    </div>
    <div class="content">
      <div class="column" style="display: flex">
        <echarts-view ref="echarts1" :options="option1" height="300px"></echarts-view>
        <echarts-view ref="echarts2" :options="option2" height="300px"></echarts-view>
      </div>
      <!-- <div class="column" style="margin-left: 1.5%">
        <div @mouseenter="clearAutoPlay" @mouseleave="setAutoPlay">
          <echarts-view ref="echarts3" :options="option3" height="300px"></echarts-view>
        </div>
      </div> -->
      <div class="column">
        <div class="table">
          <div class="header">
            <div class="col">运营单位名称</div>
            <div class="col">运营项目数量</div>
            <div class="col">运营房源套数</div>
          </div>
          <vue-seamless-scroll :data="listData" :class-option="classOption" class="scroll-warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="col">
                  <ellipsis :length="20">{{ item.name }}</ellipsis>
                </span>
                <span class="col">
                  <ellipsis :length="20">{{ item.value }}</ellipsis>
                </span>
                <span class="col">
                  <ellipsis :length="20">{{ item.FWCOUNT }}</ellipsis>
                </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView, Ellipsis } from '@/components'
import vueSeamlessScroll from 'vue-seamless-scroll'
import axios from 'axios'
import * as echarts from 'echarts'
export default {
  name: 'Left2',
  props: {
    areaID: {
      type: String,
      default: '',
    },
  },
  components: {
    headerTitle,
    echartsView,
    vueSeamlessScroll,
    Ellipsis,
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    areaID: function () {
      this.fetchData()
    },
  },
  data() {
    return {
      autoPlayer: null,
      total: 0,
      option1: {},
      option2: {},
      option3: {},
    }
  },
  methods: {
    fetchData() {
      // 本地ip
      const echart1 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJRY_HXZBT',
        params: {
          Userid: 1,
          QY: this.areaID,
        },
      })
      const echart2 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJRY_MJZBT',
        params: {
          Userid: 1,
          QY: this.areaID,
        },
      })
      const echart3 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJFY_YYDWRZL',
        params: {
          Userid: 1,
          QY: this.areaID,
        },
      })
      Promise.all([echart1, echart2, echart3]).then((res) => {
        const hx = []
        const mj = []
        const xAxis = []
        const xmsl = []
        const fyts = []
        const czsl = []
        res[0].data.forEach((item) => {
          hx.push({
            name: item.name,
            value: Number(item.value),
          })
        })
        res[1].data.forEach((item) => {
          mj.push({
            name: item.name,
            value: Number(item.value),
          })
        })
        this.listData = res[2].data
        console.log('this.listData1', this.listData)
        res[2].data.forEach((item) => {
          xAxis.push(item.name)
          xmsl.push(Number(item.value))
          fyts.push(Number(item.FWCOUNT))
          czsl.push(Number(item.FWZT))
        })
        this.total = res[2].data.length
        this.option1 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '户型',
              left: '48%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '户型',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['50%', '50%'],
              label: {
                formatter: '{b} : {c}套',
                color: '#ffffff',
                // show: false,
                // position: 'center',
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false,
              // },
              data: hx,
            },
          ],
        }
        this.option2 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true,
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            bottom: 0,
            textStyle: {
              color: '#ffffff',
              fontSize: 18,
            },
          },
          title: [
            {
              text: '面积',
              left: '48%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff',
                fontSize: 20,
              },
            },
          ],
          series: [
            {
              name: '面积',
              type: 'pie',
              radius: ['35%', '50%'],
              avoidLabelOverlap: false,
              center: ['50%', '50%'],
              label: {
                formatter: '{b} : {c}套',
                color: '#ffffff',
                // show: false,
                // position: 'center',
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  formatter: '{b}\n{c}',
                  fontWeight: 'bold',
                },
              },
              // labelLine: {
              //   show: false,
              // },
              data: mj,
            },
          ],
        }
        this.option3 = {
          tooltip: {
            trigger: 'axis',
            confine: true,
          },
          grid: {
            left: 0,
            right: 10,
            top: 40,
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: xAxis,
              axisLine: {
                lineStyle: {
                  color: '#DCE2E8',
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: '#556677',
                },
                // 默认x轴字体大小
                fontSize: 12,
                // margin:文字到x轴的距离
                margin: 15,
              },
              axisPointer: {
                label: {
                  padding: [0, 0, 10, 0],
                  // 这里的margin和axisLabel的margin要一致!
                  margin: 15,
                  // 移入时的字体大小
                  fontSize: 12,
                  backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#fff', // 0% 处的颜色
                      },
                      {
                        offset: 0.86,
                        color: '#fff', // 0% 处的颜色
                      },
                      {
                        offset: 0.86,
                        color: '#33c0cd', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#33c0cd', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              boundaryGap: false,
            },
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '项目数量',
              type: 'line',
              stack: 'Total',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: '#0092f6',
                  lineStyle: {
                    color: '#0092f6',
                    width: 1,
                  },
                  areaStyle: {
                    // color: '#94C9EC'
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: 'rgba(7,44,90,0.3)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(0,146,246,0.9)',
                      },
                    ]),
                  },
                },
              },
              data: xmsl,
            },
            {
              name: '房源套数',
              type: 'line',
              stack: 'Total',
              symbol: 'circle',
              symbolSize: 8,

              itemStyle: {
                normal: {
                  color: '#00d4c7',
                  lineStyle: {
                    color: '#00d4c7',
                    width: 1,
                  },
                  areaStyle: {
                    // color: '#94C9EC'
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: 'rgba(7,44,90,0.3)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(0,212,199,0.9)',
                      },
                    ]),
                  },
                },
              },
              data: fyts,
            },
            {
              name: '出租数量',
              type: 'line',
              stack: 'Total',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: '#aecb56',
                  lineStyle: {
                    color: '#aecb56',
                    width: 1,
                  },
                  areaStyle: {
                    // color: '#94C9EC'
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: 'rgba(7,44,90,0.3)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(114,144,89,0.9)',
                      },
                    ]),
                  },
                },
              },
              data: czsl,
            },
          ],
          dataZoom: [
            // 滑动条
            {
              show: false, // 是否显示滑动条
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 5, // 一次性展示几个。
            },
          ],
        }
        this.$nextTick(() => {
          this.setAutoPlay()
        })
      })
    },
    setAutoPlay() {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option3.dataZoom[0].endValue === this.option3.series[0].data.length) {
          this.option3.dataZoom[0].endValue = 5
          this.option3.dataZoom[0].startValue = 0
        } else {
          this.option3.dataZoom[0].endValue = this.option3.dataZoom[0].endValue + 1
          this.option3.dataZoom[0].startValue = this.option3.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay() {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  font-size: 18px;
  .content {
    display: flex;
    flex-direction: row;
    .column {
      flex: 1;
      .table {
        margin-left: 21px;
        .col {
          flex: 1;
          font-size: 20px;
        }

        .header {
          background: #0f3560;
          font-size: 16px;
          padding: 0 18px;
          color: #fff;
          display: flex;
          justify-content: space-between;
          height: 40px;
          line-height: 40px;
        }

        .scroll-warp {
          height: 248px;
          width: 100%;
          margin: 0 auto;
          overflow: hidden;
          ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            li {
              height: 40px;
              line-height: 40px;
              padding: 0 18px;
              color: #61a8ff;
              position: relative;
              font-size: 14px;
              display: flex;
              justify-content: space-between;
              &:nth-child(2n) {
                background: rgb(8, 38, 91);
              }
            }
          }
        }
      }
    }
  }
}
.subtext {
  color: #fff;
  background-color: #0d5b78;
  display: inline-block;
  width: 50%;
  font-size: 20px;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 6px 0;
}
</style>
